<template>
  <div>
    <button @click="d">点击弹出框</button>
    <!-- 弹出框组件 -->
    <!-- myflag：设置弹出框显示隐藏的状态
         title：标题
         maskClose：关闭模态框
         
    
     -->
    <my-dialog :myflag="flag" :title="title" @maskClose="closeMask">
      <!-- 头部 -->
      <template #top>
        
      </template>
      <!-- 内容 -->
      <template #body>
        {{ contnet }}
      </template>
      <!-- 底部 -->
      <template #foot class="dialogFoot">
        <el-button @click="flag = false">取 消</el-button>
        <el-button type="primary" @click="flag = false">确 定</el-button>
      </template>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from "../components/dialog.vue";
export default {
  name: "",
  components: {
    MyDialog,
  },
  data() {
    return {
      // 模态框显示隐藏
      flag: false,
      title: "标题",
      contnet: "内容",
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 状态取反
    d() {
      this.flag = true;
    },
    // 关闭遮罩层
    closeMask(val) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.flag = val;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped lang='scss'>

</style>
